$(function(){
      // 1.1 获取裁剪区域的 DOM 元素
  const $image = $('#image')
  
  // 1.2 配置选项
  const options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: '.img-preview'
  }

  // 1.3 创建裁剪区域
  $image.cropper(options)
  // 模拟点击上传按钮
  $('#btnfile').click(function(){
    // console.log('123');
    $('#file').click()
  })
  // 文件上传
  $('#file').change(function(e){
  const files = e.target.files
  // console.log(files);
  // 如果等于零表示为空没有上传图片
  if(files.length === 0) return
  // 上传成功 转换为url地址
  const imgURL = URL.createObjectURL(files[0])
  // 展示图片
  // 固定写法
  // 1.销毁原来的裁剪区域
  $image.cropper('destroy')
  // 2.src属性赋值
  $image.attr('src',imgURL)
  // 3.在开启一个裁剪区域
  $image.cropper(options)
  })

  // 为上传按钮注册点击事件
  $('#btnsc').click(function(){
    // 把裁剪区域转混为 64格式
    const base64 = $image.cropper('getCroppedCanvas',{
      // 创建一个画布
      width:100,
      height:100
    }).toDataURL('image/png')       // 将 Canvas 画布上的内容，转化为 base64 格式的字符串
    // 发起请求
    $.post('/my/update/avatar',{'avatar':base64},function(res){
      if(res.status === 0){
        // 成功调父级方法刷新用户信息
        // 发起获取用户信息的请求
        window.parent.getuserInfo()
      }
      layer.msg(res.message)
    })
  })

})